<template>
    <div id="app" class="content">
        <div class="download">
            <div>
                <div class="title">
                    姓名<span style="color: red; margin-left: 6px">*</span>
                    <div v-show="errMsg.includes('name')" class="error-msg">
                        输入格式错误
                    </div>
                </div>
                <div class="phoneCode">
                    <input
                        @blur="handleVerField('name')"
                        v-model="form.name"
                        class="intPhone"
                        type="text"
                        autocomplete="off"
                        required
                    />
                </div>
            </div>
            <div>
                <div class="title">
                    性别
                    <div v-show="errMsg.includes('sex')" class="error-msg">
                        输入格式错误
                    </div>
                </div>
                <div style="margin: 10px 58px 20px">
                    <div
                        class="radio-box"
                        v-for="(item, index) in radios"
                        :key="item.id"
                    >
                        <span
                            class="radio"
                            :class="{ radioOn: item.isChecked }"
                        ></span>
                        <input
                            v-model="sex"
                            :value="item.value"
                            class="input-radio"
                            :checked="item.isChecked"
                            @click="check(index)"
                            type="radio"
                        /><span
                            style="
                                font-size: 14px;
                                font-weight: bold;
                                color: #333333;
                                margin: 2px 0 0 4px;
                            "
                            >{{ item.label }}</span
                        >
                    </div>
                </div>
            </div>
            <div>
                <div class="title">
                    身份证号<span style="color: red; margin-left: 6px">*</span>
                    <div v-show="errMsg.includes('idcard')" class="error-msg">
                        输入格式错误
                    </div>
                </div>
                <div class="phoneCode">
                    <input
                        @blur="handleVerField('idcard')"
                        v-model="form.idcard"
                        class="intPhone"
                        type="text"
                        autocomplete="off"
                    />
                </div>
            </div>
            <div>
                <div class="title">
                    权益卡卡号<span style="color: red; margin-left: 6px"
                        >*</span
                    >
                    <div v-show="errMsg.includes('cardnum')" class="error-msg">
                        卡号信息错误
                    </div>
                </div>
                <div class="phoneCode">
                    <input
                        v-model="form.cardnum"
                        class="intPhone"
                        type="text"
                        autocomplete="off"
                        placeholder="刮开涂层，填第二行"
                    />
                </div>
            </div>
            <div>
                <div class="title">
                    手机号<span style="color: red; margin-left: 6px">*</span>
                    <div v-show="errMsg.includes('phone')" class="error-msg">
                        11位数字
                    </div>
                </div>
                <div class="phoneCode">
                    <input
                        input
                        @blur="handleVerField('phone')"
                        class="intPhone"
                        type="text"
                        v-model="form.phone"
                    />
                </div>
            </div>
            <div>
                <div class="title">
                    验证码<span style="color: red; margin-left: 6px">*</span>
                    <div v-show="errMsg.includes('verCode')" class="error-msg">
                        6位数字
                    </div>
                </div>
                <div class="phoneCode">
                    <input
                        @blur="handleVerField('verCode')"
                        v-model="form.verCode"
                        class="intCode"
                        type="text"
                        maxlength="6"
                    />
                    <div
                        @click="handleGetVerCode"
                        :class="time == 60 ? 'btnSendCode1' : 'btnSendCode2'"
                    >
                        {{ time == 60 ? "获取验证码" : `${time}s` }}
                    </div>
                </div>
            </div>
            <div>
                <div class="title">
                    邀请人
                </div>
                <div class="phoneCode">
                    <input
                        @blur="handleVerField('name')"
                        v-model="form.invitationMan"
                        class="intPhone"
                        type="text"
                        autocomplete="off"
                        required
                    />
                </div>
            </div>
            <div
                style="
                    display: flex;
                    width: 260px;
                    margin: 0 auto;
                    font-size: 14px;
                "
            >
                <div class="agree-box">
                    <span
                        :class="!changed ? 'agreeRadioOn' : 'agreeRadio'"
                    ></span>
                    <input
                        v-model="form.agree"
                        class="agree-radio"
                        name="协议"
                        @change="retainRecord"
                        @click="controlSingel($event)"
                        value="1"
                        type="radio"
                    />
                </div>
                <div>
                    我已阅读并同意十蜂健康<span
                        style="color: #f7d25b"
                        @click="userAgreement"
                        >《用户协议》</span
                    >和<span style="color: #f7d25b" @click="privacy"
                        >《隐私政策》</span
                    >
                </div>
            </div>
            <div class="next">
                <button @click="sumbit" class="next_btn">提交</button>
            </div>
            <div class="hotline">
                <div>十蜂健康客服热线：4008-596-598</div>
                <div class="card">
                    <div class="card_bd">
                        <img class="card_img" src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/a3cdd73b891446a99d5b686301a0888d.png" alt="" />
						<!-- https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/a3cdd73b891446a99d5b686301a0888d.png    恩内的-->
                    </div>
                </div>
                <div class="hotline_s">扫一扫二维码 添加客服微信</div>
            </div>
        </div>
        <div class="toast" v-if="showToast">
            <div class="toast-content">
                <div class="toast-msg">{{ toastMsg.message }}</div>
                <div class="toast-tips" v-if="toastMsg.tips">
                    <img src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/7a53aed84c0e445bab928a1ad2c6b11b.png" alt="" />
                    <span>{{ toastMsg.tips }}</span>
                </div>
                <div class="close-icon" @click="close">
                    <img src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/5f86670d7bbf4ac3a3890ed5570f7728.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
export default {
    name: "App",
    data() {
        return {
            radios: [
                {
                    label: "男",
                    value: "男",
                    isChecked: false,
                },
                {
                    label: "女",
                    value: "女",
                    isChecked: false,
                },
            ],
            agreeCheck: false,
            type: 0,
            change: false,
            changed: true,
            showToast: false,
            toastMsg: {
                message: "",
                tips: "",
            },
			sex: "",
            form: {
                name: "",
                idcard: "",
                cardnum: "",
                invitationNum: "", //邀请码
                phone: "",
                verCode: "",
                agree: "",
                invitationMan:''//邀请人
            },
            errMsg: [],
            requiredField: ["name", "cardnum", "phone", "verCode","idcard"],
            time: 60,
            unionId:''
        };
    },
	onLoad(option) {
		console.log("object :>> ", option);
		this.form.cardnum = option.cardnum || ''
		this.unionId = option.unionId || ''
	},
    created() {
        console.log("object :>> ", this.$route.query);
        if (this.$route.query.cardnum)
            this.form.cardnum = this.$route.query.cardnum;
        if (this.$route.query.unionId)
            this.unionId = this.$route.query.unionId;
    },
    methods: {
        // 性别选项
        check(index) {
            // 先取消所有选中项
            this.radios.forEach((item) => {
                item.isChecked = false;
            });
            //再设置当前点击项选中
            this.sex = this.radios[index].value;
            // 设置值，以供传递
            this.radios[index].isChecked = true;
            console.log(this.sex,'1111');
        },
        controlSingel($event) {
            let _this = this;
            console.log(this.changed, 123456);
            setTimeout(() => {
                if (!this.changed) {
                    $event.target.checked = true;
                    this.form.agree = 1;
                    this.changed = true;
                    // 可以写些单选框没有选中的代码处理
                } else {
                    _this.changed = false;
                }
            }, 0);
        },
        retainRecord() {
            // 可以写些单选框选中的代码处理
            this.changed = false;
        },
        //请求响应后如果有报错信息调用这个方法弹窗提示。
        handleShowToast(params) {
            this.showToast = true;
            this.toastMsg = params;
        },
        //验证不为空
        verEmpty(value) {
            console.log("value", value);
            return value && value !== "" ? true : false;
        },
        //验证身份证号
        verIDCard(value) {
            // if (!value.trim()) return true;
            return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(
                value
            );
        },
        //验证邀请码
        verInvitationNum(value) {
            //长度8位
            console.log("verInvitationNum", value);
            if (!value.trim()) return true;
            return value.length !== 8 ? false : true;
        },
        //验证手机验证码
        verCode(value) {
            //长度6位
            return value.length != 6 ? false : true;
        },
        //验证手机号
        verPhone(value) {
            return /^1[3-9][0-9]{9}$/.test(value);
        },
        showErrMsg(fieldName) {
            if (!this.errMsg.includes(fieldName)) this.errMsg.push(fieldName);
        },
        hideErrMsg(fieldName) {
            const index = this.errMsg.findIndex((item) => item === fieldName);
            if (index !== -1) {
                this.errMsg.splice(index, 1);
            }
        },
        handleVerField(fieldName) {
            switch (fieldName) {
                default:
                case "name":
                    if (this.verEmpty(this.form[fieldName])) {
                        this.hideErrMsg(fieldName);
                    } else {
                        this.showErrMsg(fieldName);
                    }
                    break;
                case "idcard":
                    if (this.verIDCard(this.form[fieldName])) {
                        this.hideErrMsg(fieldName);
                    } else {
                        this.showErrMsg(fieldName);
                    }
                    break;
                case "phone":
                    if (this.verPhone(this.form[fieldName])) {
                        this.hideErrMsg(fieldName);
                    } else {
                        this.showErrMsg(fieldName);
                    }
                    break;
                case "invitationNum":
                    if (this.verInvitationNum(this.form[fieldName])) {
                        this.hideErrMsg(fieldName);
                    } else {
                        this.showErrMsg(fieldName);
                    }
                    break;
                case "verCode":
                    if (this.verCode(this.form[fieldName])) {
                        this.hideErrMsg(fieldName);
                    } else {
                        this.showErrMsg(fieldName);
                    }
                    break;
            }
        },
        //发送验证码
        handleGetVerCode() {
            if (this.time !== 60) return;
            const { phone } = this.form;
            this.handleVerField("phone"); //触发手机号校验
            if (!/^1[3456789]\d{9}$/.test(phone)) return;
            this.time--;
            this.timeId = setInterval(() => {
                this.time--;
                if (this.time <= 0) {
                    clearInterval(this.timeId);
                    this.time = 60;
                }
            }, 1000);
			const that = this;
			uni.request({
				url: `${baseUrl}/customer/equityCardAdmin/web/open/activationSendSms`,
				method: 'POST',
				data: {
					 phonenumber: phone,
				},
				success(res) {
					console.log(res,',,,')
					if (res.data.code === 200) {
						 console.log(res, "发送验证码");
					} else {
						console.log(res,',,,')
						//后台返回错误信息的话应该立刻清理定时器并恢复倒计时(可弹窗提示)
						that.handleShowToast({
							message: "发送验证码失败",
							tips: "您已经领取过E卡",
						});
						clearInterval(that.timeId);
						that.time = 60;
					}
				},
				fail(error) {
					    //后台返回错误信息的话应该立刻清理定时器并恢复倒计时(可弹窗提示)
					    that.handleShowToast({
					        message: "发送验证码失败1",
					        tips: "请再次提交",
					    });
					    clearInterval(that.timeId);
					    that.time = 60;
				}
			})
        },
        //验证完整表单
        verForm() {
            Object.keys(this.form).forEach((fieldName) => {
                //只校验必填字段，非必填字段blur事件就会校验，如果校验不通过，属性名就会存在errmsg中
                if (this.requiredField.includes(fieldName)) {
                    this.handleVerField(fieldName);
                }
            });
            return this.errMsg.length == 0 ? true : false;
        },
        privacy() {
           this.$u.route({
           	url: "/pages_card/userAgreement/index",
           	params: {
           		type:1
           	}
           })
        },
        //用户协议
        userAgreement() {
            this.$u.route({
            	url: "/pages_card/userAgreement/index",
            	params: {
            		type:0
            	}
            })
        },
        close() {
            this.showToast = false;
            console.log(this.type, "type");
            if (this.type == 1) {
                this.form.verCode = "";
                console.log("清空验证码");
            } else if (this.type == 2) {
                this.form.verCode = "";
                this.form.cardnum = "";
                console.log("清空验证码和卡号");
            }
        },
        sumbit() {
            const verResult = this.verForm();

            if (verResult) {
                if (this.changed) {
                    // if (this.form.agree !== "1") {
                    return this.handleShowToast({
                        message: "请先勾选用户协议",
                        tips: "阅读并勾选用户协议",
                    });
                }
                const params = {
                    realName: this.form.name,
                    phone: this.form.phone,
                    cardNum: this.form.cardnum,
                    code: this.form.verCode,
                    invitationMan: this.form.invitationMan,
                    unionId:this.unionId
                };
                if (this.form.invitationNum !== "") {
                    params.invitationCode = this.form.invitationNum;
                }
                if (this.sex !== "") {
					console.log(this.sex,'参数')
                    params.sex = this.sex;
                }
                if (this.form.idcard !== "") {
                    params.idCard = this.form.idcard;
                }

				const that = this;
				uni.request({
					url: `${baseUrl}/customer/equityCardAdmin/web/open/equityCardActivationAuto`,
					method: 'POST',
					data: params,
					success(res) {
						if (res.data.code == 200) {
						    uni.$u.toast('激活成功！');
						    that.$u.route({
						    	url: "/pages_card/activationSucess/index",
						    	params: {
						    		cardnum:that.form.cardnum
						    	}
						    })
						} else {
						    console.log(res.data.msg, "msg");
						    if (res.data.msg == "验证码错误") {
						        that.type = 1;
						    }
						    if (
						        res.data.msg == "查询权益卡信息不存在" ||
						        res.data.msg == "权益卡已激活,请勿重复使用"
						    ) {
						        that.type = 2;
						    }
						    that.handleShowToast({
						        message: res.data.msg,
						        tips: "注意区分数字与字母",
						    });
						}
					},
					fail(error) {
						that.handleShowToast({
						    message: res.data.msg,
						    tips: "注意区分数字与字母",
						});
					}
				})
            }
        },
    },
};
</script>

<style>
* {
    padding: 0;
    margin: 0;
}

.radio-box {
    display: inline-block;
    position: relative;
    height: 18px;
    line-height: 18px;
    margin-right: 58px;
}
.agree-box {
    display: inline-block;
    position: relative;
    height: 18px;
    line-height: 18px;
    margin-right: 4px;
}
.input-radio {
    display: inline-block;
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    left: 0px;
    outline: none;
    -webkit-appearance: none;
}
.agree-radio {
    display: inline-block;
    position: absolute;
    opacity: 0;
    width: 13px;
    height: 13px;
    cursor: pointer;
    left: 0px;
    outline: none;
    -webkit-appearance: none;
}
.radio {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/863c726637954322a78e119c07bbe63b.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.agreeRadio {
    display: inline-block;
    width: .6875rem;
    height: .6875rem;
    vertical-align: middle;
    border: 0.0625rem solid #999999;
    border-radius: 50%;
}
.radioOn {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/11ef0ac9b300457a836bc99a38ead18f.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.agreeRadioOn {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/11ef0ac9b300457a836bc99a38ead18f.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.content {
    background: #3e3e3e;
    padding: 15px 14px 36px;
}
.download {
    background: #fff;
    border-radius: 10px;
    color: #333;
    font-size: 16px;
    padding: 16px 14px 33px;
}
.title {
    font-size: 18px;
    font-weight: bold;
}
.phoneCode {
    font-size: 16px;
    height: 42px;
    background: #f3f3f3;
    border-radius: 6px;
    margin: 10px 0 20px;
    display: flex;
	align-items: center;
    justify-content: space-between;
}
.sex_int {
    margin-top: 5px;
}
.agree_int {
    margin-top: 4px;
}
.intCode {
    border: none;
    font-size: 16px;
    width: 245px;
    padding: 0 6px;
    border-radius: 6px;
    background: #f3f3f3;
}
input[type="text"]:focus {
    outline: none;
}
.intPhone {
    border: none;
    font-size: 16px;
    padding: 0 6px;
    width: 100%;
    border-radius: 6px;
    background: #f3f3f3;
}
.btnSendCode1,
.btnSendCode2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 42px;
    padding: 0 5px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    background: #f7d25b;
    border-radius: 6px;
    border: none;
    outline: 0;
}
.btnSendCode2 {
    background: #dcdcdc;
}
::-webkit-input-placeholder {
    font-size: 14px;
    color: #ff8a00;
}
:-moz-placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
}
::-moz-placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
}
:-ms-input-placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
}
.next {
    text-align: center;
    margin-top: 6px;
}
.next_btn {
    width: 260px;
    height: 40px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    align-items: center;
    background: linear-gradient(315deg, #e9a656 0%, #fde3b6 100%);
    border-radius: 20000px 20000px 20000px 20000px;
    border: none;
}
.hotline {
    text-align: center;
    margin-top: 45px;
    font-size: 14px;
    font-weight: 500;
}
.hotline_s {
    font-size: 12px;
}
.card {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
}
.card_bd {
    width: 161px;
    height: 161px;
    border-radius: 10px;
    border: 1px dashed #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.card_img {
    width: 142px;
    height: 142px;
}
.error-msg {
    font-size: 12px;
    font-weight: unset;
    color: red;
    float: right;
    display: flex;
    align-items: center;
}
.error-msg::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/25/3fd86d03f631440cb40ae2fc02caa353.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: 4px;
}

.toast {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.363);
    position: fixed;
    z-index: 9999999999999999;
    left: 0;
    top: 0;
}
.toast-content {
    width: 60%;
    /* height: 24%; */
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    text-align: center;
    padding: 60px 10px 26px;
    box-sizing: border-box;
}
.toast-content .toast-msg {
    font-size: 20px;
    font-weight: bold;
}
.toast-content .toast-tips {
    color: #ff1b0b;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.toast-content .toast-tips img {
    width: 22px;
    height: 22px;
    display: block;
}
.toast-content .close-icon {
    width: 36px;
    height: 36px;
    border-radius: 15px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}
.toast-content .close-icon img {
    width: 36px;
    height: 36px;
    display: block;
}
</style>
